import React, { useState, useRef, useEffect } from "react";

export const UseRefComp = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const preState = useRef({ // 手动修改不会影响到 UI 层是 update
    count1: 0,
    count2: 0,
  });

  useEffect(() => { // 这里 UI 层已经更新完成了
    // const { count1, count2 } = preState.current;
    console.log("-----------------");
    console.log(preState.current, 1);
    preState.current = {
      count1,
      count2,
    };
  });

  return (
    <div>
      <p>test: {count1}</p>
      <p>ref: {preState.current.count1}</p>
      <button
        onClick={() => {
          let i = count1;
          let j = count1;
          setCount1(++i);
          setCount2(++j);
        }}
      >
        click me
      </button>
    </div>
  );
};
